<template>
  <div>
    <cus-search>
      <cus-search-item>
        <Form ref="formValidate" :model="form" :label-width="100">
          <FormItem label="食材名称:" prop="foodName" :label-width="80" class="mb_20">
            <Input v-model="form.foodName" maxlength=20 clearable @on-change="onInit()"
              placeholder="请输入食材名称" style="width: 200px">
            </Input>
          </FormItem>

          <FormItem label="区域" prop="kitchenArea" :label-width="60" class="mb_20">
            <Select v-model="form.kitchenArea" style="width: 200px" @on-change="onInit()">
              <Option v-for="item in areaList" :key="item.kitchenArea" :value="item.kitchenArea">{{
                    item.kitchenAreaName }}
              </Option>
            </Select>
          </FormItem>

          <FormItem label="供应商名称:" prop="supplyName" class="mb_20">
            <Input v-model="form.supplyName" maxlength=20 clearable @on-change="onInit()"
              placeholder="请输入供应商名称" style="width: 200px">
            </Input>
          </FormItem>

          <FormItem label="商品种类:" prop="foodTypeName" :label-width="80" class="mr_48 mb_20">
            <Select v-model="form.foodTypeName" style="width:200px" placeholder="请选择商品种类"
              @on-change="onInit()" clearable>
              <Option :value="item.categoryName" v-for="(item, index) in productcategoryList"
                :key="index">{{
                    item.categoryName }}</Option>
            </Select>
          </FormItem>

          <Button class="mr_20 mb_20" type="primary" @click="onInit()">查询</Button>
          <Button class="mr_20 mb_20" type="default" @click="reset()">重置</Button>

        </Form>
      </cus-search-item>
    </cus-search>
    <div class="content-bottom mt_20">
      <div class="btnBox">
        <div class="btnBox-item">
          <Button class="mr_20" type="primary" v-if="selectData.length != 10"
            @click="handleSelectAll(true)" ghost>全选</Button>
          <Button class="mr_20" type="primary" v-if="selectData.length != 0"
            @click="handleSelectAll(false)"
            ghost>{{ selectData.length == 10 ? '取消全选' : '取消所选' }}</Button>
          <Button class="mr_20" type="error" v-permission="40" :disabled="selectData.length == 0"
            ghost @click="onDelete()">删除</Button>
          <Button class="mr_20" type="error" v-permission="40" ghost
            @click="onDeleteAll()">清空全部</Button>
        </div>
        <div class="btnBox-item">
          <Button class="mr_20" type="primary" v-permission="20" @click="onAdd()" ghost>添加</Button>
          <Button class="mr_20" type="primary" v-permission="30" @click="onImport()">供应信息导入</Button>
          <!-- <Button class="mr_20" type="primary" v-permission="50" @click="onScan()">解析供应信息生成Excel</Button> -->
          <Button class="mr_20" type="primary" @click="onExport()">导出</Button>
        </div>
      </div>
      <div class="tableBox">
        <supplyinfonTable ref="supplyinfonTable" :form="form" @changeSelect="changeSelect">
        </supplyinfonTable>
      </div>
    </div>
    <!-- 导入 -->
    <uploadModal ref="cusUploadNutritionTagModal" :temp-src="exportNutritionTagTemp"
      :uploadFnc="uploadNutritionTag" :titleName="importName" :areaList="areaList"
      :kitchenAreaP=form.kitchenArea
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @onOk="onOk">

      <template slot="right">
        <Card class="draw-section-item">
          <div @click="openIntellImport">
            <div class="draw-section-item-logo flex">
              <svg t="1628043694436" class="icon" viewBox="0 0 1157 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="24667" width="118" height="118">
                <path
                  d="M0.09216 582.528c0-124.37504 82.23744-233.71264 192.1536-266.112C253.07648 156.0832 403.70688 40.96 579.93216 40.96c177.64352 0 324.18304 115.07712 384.96768 275.456 113.4336 33.152 192.19968 141.06624 192.19968 266.112 0 153.96864-119.57248 279.14752-270.91968 279.14752-28.34432 0-53.92896-26.60864-53.92896-56.06912 0-33.8176 25.58464-56.1152 53.92896-56.1152 91.22816 0 163.80928-74.09664 163.80928-166.87616 0-49.61792-21.44768-95.67744-56.64768-125.1328l-9.66144-9.43616a48.96256 48.96256 0 0 0-12.46208-10.05568c-2.75968-3.60448-9.03168-3.60448-12.46208-6.49728h-3.42528c-2.75968-3.5584-6.23104-3.5584-9.0368-6.4512h-3.47136c-2.75968 0-6.23104-3.5584-9.65632-3.5584-2.75968 0-6.23104 0-6.23104-2.8928h-9.0368c-3.47136 0-6.23104 0-9.7024-3.60448h-25.4976c-2.75968-10.81344-6.23104-18.688-6.23104-29.50144-2.75968 0-2.75968-3.5584-2.75968-6.4512-3.42528-6.49728-3.42528-12.90752-6.23104-19.44576 0-3.5584-3.42528-3.5584-3.42528-7.16288-2.75968-6.49728-6.23104-12.90752-9.65632-19.4048v-6.49728c-2.80576-6.4512-9.07776-12.90752-12.46208-19.44576-53.18144-92.11392-151.38816-154.63936-261.97504-154.63936-113.34144 0-211.46624 62.5664-264.68864 154.63936l-9.0368 19.44576c0 2.18112-1.42336 2.18112-2.08896 4.31616l-1.3824 2.18112-9.7024 19.4048v7.16288l-8.94464 19.44576v6.4512c-3.47136 10.77248-6.94272 18.688-6.94272 29.46048h-28.30336c-2.75968 3.60448-6.23104 3.60448-8.94464 3.60448h-6.23104c-2.75968 2.18112-4.14208 2.8928-4.89472 2.8928a1.24928 1.24928 0 0 1-2.048 0c-2.75968 0-6.23104 3.5584-9.03168 3.5584h-6.23104c-3.42528 2.93376-6.23104 2.93376-9.65632 6.49728h-3.42528c-2.75968 2.8928-6.23104 2.8928-9.07776 6.49728h-3.42528c-2.75968 3.5584-6.23104 6.4512-9.7024 10.05568-6.23104 2.84672-8.94464 6.49728-12.416 9.39008-35.24608 29.50656-53.2224 75.56096-53.2224 125.17888 0 92.77952 72.58112 166.87616 160.37888 166.87616 32.4864 0 56.69376 22.29248 56.69376 56.06912 0 29.50656-24.20736 56.07424-56.69376 56.07424-147.82976 0.04096-270.8736-125.13792-270.8736-279.01952v-0.09216z"
                  p-id="24668"></path>
                <path
                  d="M362.94656 566.72768c0-16.54784 6.23104-28.78976 12.46208-39.56224l163.7632-186.90048c10.41408-10.81344 24.91904-16.55296 40.8064-16.55296 15.92832 0 28.34432 5.7856 41.47712 16.512l160.37888 186.98752c21.5296 22.19008 21.00224 57.63072-1.18784 79.16544a56.00256 56.00256 0 0 1-39.57248 15.80032c-15.92832 0-27.67872-8.6784-38.04672-19.45088l-69.10976-78.40768v281.9584c0 33.8176-24.21248 55.3984-53.93408 55.3984-31.104 0-53.2224-21.5808-53.2224-55.3984v-281.91232L457.69728 602.7264c-10.368 10.81344-25.54368 19.45088-41.43104 19.45088-28.3904 0-53.31456-25.90208-53.31456-55.40352v-0.04608z"
                  p-id="24669"></path>
              </svg>
            </div>
            <div class="draw-section-item-title">智能导入</div>

          </div>
        </Card>
      </template>

    </uploadModal>
    <!-- 添加、编辑供应信息 -->
    <addSupplyinfoModal ref="addSupplyinfoModal"></addSupplyinfoModal>
    <!-- 解析供应信息生成excel -->
    <scanAcceptedOrder ref="scanAcceptedOrder"></scanAcceptedOrder>
    <exportExcelModal ref="exportExcelModal"></exportExcelModal>
    <!--供应信息导入浏览-->
    <detailDrawer ref="detailDrawer" @onOk="onInit()"></detailDrawer>

		<intelligentImport ref="importRef"  @onOk="onOk"
    :uploadFnc="uploadNutritionTag" :area="form.kitchenArea"></intelligentImport>
 
  </div>
</template>

<script>
import {
	selectFoodRaisePage,
	getProductCategoryList,
	downloadFoodRaiseExcelTemplate,
	exportFoodRaise,
	batchDeleteFoodRaise,
	batchDeleteFoodRaiseAll,
	intelligentParams
} from '@/api/organ/dishesModule'
import addSupplyinfoModal from './components/addSupplyinfoModal'
import scanAcceptedOrder from './components/scanAcceptedOrder'
// table表格
import supplyinfonTable from './components/supplyinfonTable.vue'
// 导出弹窗
import exportExcelModal from './components/exportExcelModal.vue'
// 供应信息导入浏览
import detailDrawer from './components/detailDrawer.vue'
// 导入供应信息
import uploadModal from './components/uploadModal.vue'
//智能导入信息
import intelligentImport from './components/intelligentImport.vue'

export default {
	components: {
		addSupplyinfoModal,
		scanAcceptedOrder,
		exportExcelModal,
		supplyinfonTable,
		detailDrawer,
		uploadModal,
		intelligentImport
	},
	data() {
		return {
			ruleValidate: {},
			form: {
				foodName: '', // 食材名称
				foodTypeName: '', // 商品分类
				supplyName: '', // 供应商名称
				kitchenArea: '' // 区域
			},

			productcategoryList: [], // 商品分类列表
			exportNutritionTagTemp: '', // 下载模板地址
			uploadNutritionTag: exportFoodRaise,
			importName: '供应信息导入',
			loading: false,
			areaList: this.$store.state.selectList.areaList, //区域列表
			data: [],
			columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: '序号',
					width: 70,
					type: 'index',
					align: 'center'
				},
				{
					title: '食材名称',
					key: 'foodName',
					align: 'center'
				},
				{
					title: '商品种类',
					key: 'productCategory',
					align: 'center'
				},
				{
					title: '供应商',
					key: 'supplyName',
					align: 'center'
				},
				{
					title: '计量单位',
					key: 'specification',
					align: 'center'
				},
				{
					title: '单位重量/kg',
					key: 'unitWeight',
					align: 'center'
				},
				{
					title: '价格',
					key: 'price',
					align: 'center',
					width: 120
				},
				{
					title: '称重入库',
					slot: 'weightFlag',
					align: 'center'
				},
				{
					title: '品牌',
					key: 'brand',
					align: 'center'
				},
				{
					title: '条码',
					key: 'snCode',
					align: 'center'
				},
				{
					title: '生效日期',
					key: 'effectiveDate',
					align: 'center'
				}
				// {
				//     title: '操作',
				//     width: 150,
				//     fixed: 'right',
				//     slot: 'operation',
				//     align: 'center'
				// },
			],
			pages: {
				page: 1,
				pageSize: 10,
				pageTotal: 0
			},
			selectData: [] // 选中数据
		}
	},
	mounted() {
		this.onInit()
		this.productcategoryApi()
		// this.$refs['detailDrawer'].show()
	},
	methods: {
		openIntellImport() {
			this.$refs['cusUploadNutritionTagModal'].onCancel()
			// this.$refs['importRef'].show();
			intelligentParams().then((res) => {
				this.$refs['importRef'].show(res.data)
			})
		},
		// 初始化
		onInit() {
			if (!this.form.kitchenArea)
				this.form.kitchenArea = this.areaList[0].kitchenArea
			this.$refs['supplyinfonTable'].pages.page = 1
			this.$refs['supplyinfonTable'].onInit()
		},

		exprotInit() {},
		// 重置搜索
		reset() {
			this.$refs['formValidate'].resetFields()
			this.onInit()
		},
		// 解析
		onScan() {
			this.$refs['scanAcceptedOrder'].show()
		},
		// 导出
		onExport() {
			this.$refs['exportExcelModal'].form = this.form
			this.$refs['exportExcelModal'].show()
		},
		// 添加
		onAdd() {
			this.$refs['addSupplyinfoModal'].show()
		},
		// 导入
		onImport() {
			this.exportNutritionTagTemp = downloadFoodRaiseExcelTemplate
			this.uploadNutritionTag = exportFoodRaise
			this.$refs['cusUploadNutritionTagModal'].show()
			// this.$refs['detailDrawer'].show();
		},
		changeSelect(e) {
			this.selectData = e
			console.log(e)
		},
		// 全选
		handleSelectAll(v) {
			console.log(111)
			this.$refs['supplyinfonTable'].handleSelectAll(v)
		},
		// 删除
		onDelete() {
			this.$refs['supplyinfonTable'].onDelete()
		},

		// 删除全部
		onDeleteAll() {
			this.$Modal.confirm({
				title: '删除确认',
				content: `是否确认删除全部数据内容？`,
				onOk: () => {
					this.getDeleteAll()
				}
			})
		},

		getDeleteAll() {
			return new Promise((resolve) => {
				batchDeleteFoodRaiseAll({
					kitchenArea: this.form.kitchenArea
				}).then((res) => {
					if (res.code == 1) {
						this.$Message.success('删除成功.')
						this.onInit()
					} else {
						this.$Message.info(res.msg)
					}
				})
			})
		},

		onOk(res) {
			if (res.data.needReview == true) {
				this.$refs['detailDrawer'].show(res)
			} else {
				this.onInit()
			}
		},
		// 获取商品分类
		productcategoryApi() {
			return new Promise((resolve) => {
				getProductCategoryList({
					size: -1
				}).then((res) => {
					if (res.code === 1) {
						this.productcategoryList = res.data
						resolve()
					}
				})
			})
		}
	}
}
</script>

<style scoped>
/deep/.ivu-input-icon {
	height: 32px !important;
	line-height: 32px !important;
}
</style>

<style lang="less" scoped>
.content {
	// padding: 20px;
	&-bottom {
		background: #fff;
		border-radius: 4px;
		box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
		padding: 20px;
	}
}

.formBox {
	width: 100%;
	background: #fff;
	border-radius: 4px;
	box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
	padding: 20px 20px 1px;
	display: flex;
	flex-wrap: wrap;

	&-item {
		margin-right: 48px;
	}
}

.mr_20 {
	margin-right: 20px;
}

.btnBox {
	width: 100%;
	display: flex;
	justify-content: space-between;

	&-item {
		display: flex;
	}
}
.draw {
	&-section {
		display: flex;
		align-items: center;
		justify-content: space-around;

		&-item {
			background: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 220px;
			cursor: pointer;
			width: 200px;

			&-title {
				text-align: center;
				margin-top: 10px;
				color: rgba(51, 51, 51, 1);
			}

			&-label {
				text-align: center;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
}
</style>
